<template>
  <div class="my-conetent body-bg">
    <div v-if="!initLoading">
      <div class="seacher"><van-search :value="productName" placeholder="搜索商品" @search="search" /></div>
      <div class="tabs-cont">
        <van-tabs sticky animated swipeable color="#00B7EE" lazy-render :active="active" @change="changeTabs">
          <van-tab title="所有商品">
            <scroll-view :scroll-y="true" enable-back-to-top lower-threshold="-50" class="scroll-height" @scrolltolower="lower" :scroll-top="0">
              <ul class="list-cont" v-if="list.length">
                <li class="items" v-for="(item,index) in list" :key="index">
                  <div class="top border-bottom">
                    <img class="top-img" :src="item.img" alt="img">
                    <ul class="items-cont">
                      <li class="items-title overflow-tow">{{item.title}}</li>
                      <li class="items-price">价格：￥{{item.price}}</li>
                      <li class="items-points">积分：{{item.points}}</li>
                    </ul>
                  </div>
                  <div class="bottom">
                    <van-button round size="small" color="#00B7EE" @click="goDet(3)">我要购买</van-button>
                    <van-button round plain size="small" color="#00B7EE" @click="goDet(4)">我要兑换</van-button>
                  </div>
                </li>
                <li v-if="isReachBottom" class="pull-loading"><van-loading type="spinner" size="20px" color="#1989fa" /></li>
                <li v-if="isBottom" class="bottom-line">-- 亲，已经到最后了--</li>
              </ul>
              <div v-else class="empty">
                <img src="/static/images/empty-icon.png" alt="空">
                <p class="empty-tips">暂无数据~</p>
              </div>
            </scroll-view>
          </van-tab>
          <van-tab title="服装类">
            <scroll-view :scroll-y="true" enable-back-to-top lower-threshold="-50" class="scroll-height" @scrolltolower="lower" :scroll-top="0">
              <ul class="list-cont" v-if="list.length">
                <li class="items" v-for="(item,index) in list" :key="index">
                  <div class="top border-bottom">
                    <img class="top-img" :src="item.img" alt="img">
                    <ul class="items-cont">
                      <li class="items-title overflow-tow">{{item.title}}</li>
                      <li class="items-price">价格：￥{{item.price}}</li>
                      <li class="items-points">积分：{{item.points}}</li>
                    </ul>
                  </div>
                  <div class="bottom">
                    <van-button round size="small" color="#00B7EE" @click="goDet(3)">我要购买</van-button>
                    <van-button round plain size="small" color="#00B7EE" @click="goDet(4)">我要兑换</van-button>
                  </div>
                </li>
                <li v-if="isReachBottom" class="pull-loading"><van-loading type="spinner" size="20px" color="#1989fa" /></li>
                <li v-if="isBottom" class="bottom-line">-- 亲，已经到最后了--</li>
              </ul>
              <div v-else class="empty">
                <img src="/static/images/empty-icon.png" alt="空">
                <p class="empty-tips">暂无数据~</p>
              </div>
            </scroll-view>
          </van-tab>
          <van-tab title="鞋袜类">
            <scroll-view :scroll-y="true" enable-back-to-top lower-threshold="-50" class="scroll-height" @scrolltolower="lower" :scroll-top="0">
              <ul class="list-cont" v-if="list.length">
                <li class="items" v-for="(item,index) in list" :key="index">
                  <div class="top border-bottom">
                    <img class="top-img" :src="item.img" alt="img">
                    <ul class="items-cont">
                      <li class="items-title overflow-tow">{{item.title}}</li>
                      <li class="items-price">价格：￥{{item.price}}</li>
                      <li class="items-points">积分：{{item.points}}</li>
                    </ul>
                  </div>
                  <div class="bottom">
                    <van-button round size="small" color="#00B7EE" @click="goDet(3)">我要购买</van-button>
                    <van-button round plain size="small" color="#00B7EE" @click="goDet(4)">我要兑换</van-button>
                  </div>
                </li>
                <li v-if="isReachBottom" class="pull-loading"><van-loading type="spinner" size="20px" color="#1989fa" /></li>
                <li v-if="isBottom" class="bottom-line">-- 亲，已经到最后了--</li>
              </ul>
              <div v-else class="empty">
                <img src="/static/images/empty-icon.png" alt="空">
                <p class="empty-tips">暂无数据~</p>
              </div>
            </scroll-view>
          </van-tab>
          <van-tab title="运动品">
            <scroll-view :scroll-y="true" enable-back-to-top lower-threshold="-50" class="scroll-height" @scrolltolower="lower" :scroll-top="0">
              <ul class="list-cont" v-if="list.length">
                <li class="items" v-for="(item,index) in list" :key="index">
                  <div class="top border-bottom">
                    <img class="top-img" :src="item.img" alt="img">
                    <ul class="items-cont">
                      <li class="items-title overflow-tow">{{item.title}}</li>
                      <li class="items-price">价格：￥{{item.price}}</li>
                      <li class="items-points">积分：{{item.points}}</li>
                    </ul>
                  </div>
                  <div class="bottom">
                    <van-button round size="small" color="#00B7EE" @click="goDet(3)">我要购买</van-button>
                    <van-button round plain size="small" color="#00B7EE" @click="goDet(4)">我要兑换</van-button>
                  </div>
                </li>
                <li v-if="isReachBottom" class="pull-loading"><van-loading type="spinner" size="20px" color="#1989fa" /></li>
                <li v-if="isBottom" class="bottom-line">-- 亲，已经到最后了--</li>
              </ul>
              <div v-else class="empty">
                <img src="/static/images/empty-icon.png" alt="空">
                <p class="empty-tips">暂无数据~</p>
              </div>
            </scroll-view>
          </van-tab>
          <van-tab title="书包">
            <scroll-view :scroll-y="true" enable-back-to-top lower-threshold="-50" class="scroll-height" @scrolltolower="lower" :scroll-top="0">
              <ul class="list-cont" v-if="list.length">
                <li class="items" v-for="(item,index) in list" :key="index">
                  <div class="top border-bottom">
                    <img class="top-img" :src="item.img" alt="img">
                    <ul class="items-cont">
                      <li class="items-title overflow-tow">{{item.title}}</li>
                      <li class="items-price">价格：￥{{item.price}}</li>
                      <li class="items-points">积分：{{item.points}}</li>
                    </ul>
                  </div>
                  <div class="bottom">
                    <van-button round size="small" color="#00B7EE" @click="goDet(3)">我要购买</van-button>
                    <van-button round plain size="small" color="#00B7EE" @click="goDet(4)">我要兑换</van-button>
                  </div>
                </li>
                <li v-if="isReachBottom" class="pull-loading"><van-loading type="spinner" size="20px" color="#1989fa" /></li>
                <li v-if="isBottom" class="bottom-line">-- 亲，已经到最后了--</li>
              </ul>
              <div v-else class="empty">
                <img src="/static/images/empty-icon.png" alt="空">
                <p class="empty-tips">暂无数据~</p>
              </div>
            </scroll-view>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <div v-else class="init-loading"><van-loading type="spinner" color="#1989fa" /></div>
  </div>
</template>

<script>
import store from '../../store/globalStore'
export default {
  data() {
    return {
      scrollHeight: true,
      initLoading: true, // 初始加载
      isBottom: false, // 是否加载完全部数据
      isReachBottom: false, // 是否显示加载状态
      active: 0,
      productName: "",
      list: [
        {img: 'https://img.yzcdn.cn/vant/cat.jpeg',title: "你 2019宁波杭州湾新区“绿地杯”足协（秋季）联赛",price: "300", points: "3000"},
        {img: 'https://img.yzcdn.cn/vant/cat.jpeg',title: "你 2019宁波杭州湾新区“绿地杯”足协（秋季）联赛",price: "300", points: "3000"},
        {img: 'https://img.yzcdn.cn/vant/cat.jpeg',title: "你 2019宁波杭州湾新区“绿地杯”足协（秋季）联赛",price: "300", points: "3000"},
        {img: 'https://img.yzcdn.cn/vant/cat.jpeg',title: "你 2019宁波杭州湾新区“绿地杯”足协（秋季）联赛",price: "300", points: "3000"},
      ]
    };
  },
  onShow() {
    this.getShiftWorkList();
  },
  methods: {
    // 获取列表
    getShiftWorkList() {
      this.$fetch.shiftWork()
      .then(res=>{
        this.initLoading = false;
      }).catch(err=>{
        this.initLoading = false;
      })
    },
    // 搜索
    search(e) {
      this.productName = e.mp.detail;
    },
    // 切换tabs
    changeTabs(e) {
      this.active = e.mp.detail.index;
    },
    // 2兑换/1购买
    goDet(type) {
      wx.navigateTo({
        url: `/pages/shoppingDet/main?from=${type}`
      })
    },
    // lower
    lower() {
      let that = this;
      that.isReachBottom = true;
      wx.showNavigationBarLoading() //在标题栏中显示加载
      if(that.list.length<10){
        setTimeout(function(){
          that.isReachBottom = false;
          wx.hideNavigationBarLoading() //完成停止加载
          //模拟加载
          that.list = [...that.list,...that.list]
        },1500);
      } else {
        that.isReachBottom = false;
        that.isBottom = true;
        wx.hideNavigationBarLoading() //完成停止加载
      }
    },
    lower2() {
      let that = this;
      that.isReachBottom = true;
      wx.showNavigationBarLoading() //在标题栏中显示加载
      if(that.exchangeRecords.length<10){
        setTimeout(function(){
          that.isReachBottom = false;
          wx.hideNavigationBarLoading() //完成停止加载
          //模拟加载
          that.exchangeRecords = [...that.exchangeRecords,...that.exchangeRecords]
        },1500);
      } else {
        that.isReachBottom = false;
        that.isBottom = true;
        wx.hideNavigationBarLoading() //完成停止加载
      }
    }
  },
};
</script>
<style lang="less" scope>
.my-conetent {
  width: 100%;
  min-height: 100vh;
  overflow: hidden;s
  .seacher{
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    background: #fff;
    border-top: 0.5px solid #dcdcdc;
    display: flex;
    align-items: center;
    .van-search{
      padding: 0 !important;
    }
  }
  .tabs-cont{
    .van-tabs__scroll{
      padding: 0 8px;
      background: #F1F2F7;
    }
    .van-tab--active{
      .van-ellipsis{
        color: #00B7EE;
      }
    }
    .scroll-height{
      height: calc(~"100vh - 90px")
    }
  }
  .list-cont{
    width: 100%;
    overflow: hidden;
    .items{
      width: 100%;
      margin-bottom: 10px;
      overflow: hidden;
      background: #fff;
      .top{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 10px;
        box-sizing: border-box;
        .top-img{
          width: 80px;
          min-width: 80px;
          height: 80px;
          display: block;
        }
        .items-cont{
          height: 80px;
          flex-grow: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 15px;
          .items-title{
            font-size: 14px;
            color: #333;
            font-weight: bold;
          }
          .items-price{
            font-size: 12px;
            color: #00B7EE;
          }
          .items-points{
            font-size: 12px;
            color: #E60000;
          }
        }
      }
      .bottom{
        width: 100%;
        padding: 8px 10px;
        box-sizing: border-box;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        .van-button{
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
